<template>
  <div class="create">
    <CommonList class="list"
                title="选择一个要创建的对象类型："
                :items="listItems"
                @use="onUse"
                @select="onSelect"
    ></CommonList>
    <div class="name">
      <div class="label">名称:</div>
      <SInput v-model:value="name" style="flex:1;"></SInput>
    </div>
    <div class="desc">{{ desc }}</div>
    <div class="buttons">
      <SButton @click="onClick">插入</SButton>
      <SButton @click="onCancel">取消</SButton>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, ref } from 'vue';
import SInput from '@/ui-kit/input/input.vue';
import SButton from '@/ui-kit/button/button.vue';
import ObjectContainer from '../common-list/list-container.vue';
import { getNextOperation } from './data';
import { ProvideKey } from '@/ui-kit/window';
import pluginsStore from '../../../store/plugins';
import CommonList from '../common-list/list.vue';
import { ListItem } from '../common-list';


export default defineComponent({
  name: 'create-object',
  components: { CommonList, ObjectContainer, SButton, SInput },
  emits: [],
  setup(props, { emit }) {
    const closeDialog = inject(ProvideKey.CloseWindow, () => {});
    const desc = ref('描述');

    const listItems = computed<Array<ListItem>>(() => {
      const items: ListItem[] = [];
      pluginsStore().allObjects.forEach((data: sail.GameObject) => {
        if (data.canInstantiate === undefined || data.canInstantiate === true) {
          const { icon, name, desc, group } = data.info;
          items.push({
            icon, label: name, desc, group,
            data: data.bundle,
          });
        }
      });
      return items;
    });
    const name = ref('');

    let curObject: ListItem | null = null;

    function insertObject() {
      if (curObject) {
        closeDialog();
        // 获取这个对象的下一步操作是啥
        getNextOperation(curObject);
      }
    }

    return {
      name,
      desc,
      listItems,
      onSelect(data: ListItem) {
        desc.value = data.desc;
        name.value = data.label;
        curObject = data;
      },
      onClick() {
        console.log(name.value);
        insertObject();
      },
      onUse(data: ListItem) {
        curObject = data;
        insertObject();
      },
      onCancel() {
        closeDialog();
      },
    };
  },
});
</script>
<style scoped lang="scss">
.create {
  padding: 5px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .list {
    flex: 1;
    width: 100%;
  }

  .desc {
    width: 100%;
    text-align: left;
  }

  .name {
    margin: 4px 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .label {
      padding-right: 5px;
    }
  }

  .buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
  }
}
</style>
